<template>
  <div class="phone">
    <div class="header">
      <van-icon class="left" name="arrow-left" @click="$router.go(-1)" />
      <span>登录界面</span>
    </div>
    <div class="login">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="formData.phone"
            autocomplete="off"
            name="用户名"
            placeholder="输入手机号"
            v-if="loginType == 1 || loginType == 2"
          >
            <template #left-icon>
              <i class="iconfont icon-shouji"></i>
            </template>
          </van-field>
          <van-field
            v-model="formData.email"
            autocomplete="off"
            name="邮箱"
            placeholder="输入邮箱账号"
            v-if="loginType == 3"
          >
            <template #left-icon>
              <i class="iconfont icon-youxiang"></i>
            </template>
          </van-field>
          <van-field
            v-if="loginType == 1 || loginType == 3"
            v-model="formData.password"
            autocomplete="off"
            type="password"
            name="密码"
            placeholder="输入密码"
          >
            <template #left-icon>
              <i class="iconfont icon-jiesuo"></i> </template
          ></van-field>
          <van-field
            v-if="loginType == 2"
            v-model="formData.captcha"
            center
            clearable
            placeholder="请输入短信验证码"
          >
            <template #left-icon>
              <i class="iconfont icon-jiesuo"></i>
            </template>
            <template #button>
              <div class="captcha" @click="getCaptchaSent">获取验证码</div>
            </template>
          </van-field>
        </van-cell-group>

        <div
          style="margin: 16px"
          :class="
            (formData.phone && formData.password) ||
            (formData.phone && formData.captcha)
              ? ''
              : 'btn'
          "
        >
          <van-button round block type="danger" @click="login">
            登录
          </van-button>
        </div>
      </van-form>
      <div class="other">
        <span @click="toggleType" v-show="loginType == 1">使用验证码登录</span>
        <span @click="toggleType" v-show="loginType == 2">使用密码登录</span>
        <span v-if="loginType != 3">重设密码</span>
      </div>
    </div>
  </div>
</template>

<script>
import { login, getCaptchaSent, loginEmail } from "@/api/login.js";
export default {
  data() {
    return {
      formData: {
        phone: 13829009902,
        password: 210175681305,
        email: "lyf1102707959@163.com",
        captcha: null,
      },
      loginType: 1, //1 手机和密码登录    2验证码登录   3邮箱登录
    };
  },
  created() {
    if (this.$route.query.type == "email") {
      this.loginType = 3;
    }
  },
  methods: {
    // 登录
    async login() {
      let data = null;
      if (this.loginType == 3) {
        data = await loginEmail(this.formData);
      } else {
        data = await login(this.formData);
      }
      console.log(data);
      if (data.code === 200) {
        this.$toast("登录成功");
        window.localStorage.setItem("login", data.cookie);
        window.localStorage.setItem("token", data.token);
        window.localStorage.setItem("uid", data.account.id);
        this.$router.push("/");
      } else {
        this.$toast("登录失败");
      }
    },
    // 切换登录类型
    toggleType() {
      this.formData = {
        phone: null,
        password: null,
        captcha: null,
      };
      this.loginType = this.loginType == 1 ? "2" : "1";
    },
    // 获取验证码
    getCaptchaSent() {
      // 1.验证手机号码
      // let reg =
      //   /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      // if (!reg.test(this.formData.phone)) {
      //   this.$toast("请输入正确手机号码");
      //   return;
      // }
      // 请求接口验证码
      console.log(this.formData.phone);
      getCaptchaSent({ phone: this.formData.phone }).then((data) => {
        if (data.data) {
          this.$toast("验证码发送成功");
        } else {
          this.$toast("验证码发送失败");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.phone {
  height: 100vh;
  background-color: #fff;
  position: relative;
  z-index: 99;
  .header {
    position: relative;
    width: 100%;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    span {
      position: absolute;
      left: 0;
      right: 0;
      width: 70px;
      margin: auto;
      height: 50px;
      line-height: 50px;
    }
  }
  .login {
    margin-top: 30px;
    height: 100%;
    padding-bottom: 30px;
    .van-field {
      height: 43px;
      background: rgba(0, 0, 0, 3%);
      border-radius: 25px;
      margin-bottom: 18px;
      font-size: 16px;
      .captcha {
        margin-top: 0;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        color: #ff3a3a;
      }
    }
    .btn {
      opacity: 0.6;
    }
    .van-button {
      margin-top: 22px;
      height: 40px;
      border: 0;
    }
    .other {
      margin: 0 16px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      line-height: 16px;
      color: rgba(0, 0, 0, 40%);
    }
  }
}
</style>
